<template>
	<view class="content">
		<view class="index_header">
			<uni-icons type="location" size="20"></uni-icons>
			<p>xxxxxxxxxxxxxxxxxx</p>
		</view>
		<view class="swiper">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item,index) in info" :key="index">
						<view >
							<image :src='item.content'  alt=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="pic">
			<view class="pic_1">
				<image src="../../../static/img/release.png" mode=""></image>
				<p>家电清洗</p>
			</view>
			<view class="pic_1">
				<image src="../../../static/img/release.png" mode=""></image>
				<p>全屋保洁</p>
			</view>
			<view class="pic_1">
				<image src="../../../static/img/release.png" mode=""></image>
				<p>甲醛检测</p>
			</view>
			<view class="pic_1">
				<image src="../../../static/img/release.png" mode=""></image>
				<p>家电维修</p>
			</view>
		</view>
		<view class="gong">
			<view class="gong_1">
				<p>星级保洁</p>
			</view>
			<view class="gong_1">
				<p>贴心陪护</p>
			</view>
			<view class="gong_1">
				<p>烹饪服务</p>
			</view>
		</view>
		<view class="manger">
			<view class="manger_1">
				<uni-icons type="person-filled" size="35"></uni-icons>
				<p>星级管家，为您服务</p>
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		</view>
		<view class="clied">
			<view class="clied_1">
				<p class="pp">案例展示</p>
				<p>更多<uni-icons type="right" size="20"></uni-icons></p>
			</view>
			<view class="clied_2">
				<image src="../../../static/picture/1.png" mode=""></image>
				<view>
					<image src="../../../static/picture/2.png" mode=""></image>
					<image src="../../../static/picture/3.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				info: [{
					content: '../../../static/picture/1.png'
				}, {
					content: '../../../static/picture/2.png'
				}, {
					content: '../../../static/picture/3.png'
				}],
				current: 0,
				mode: 'round',
			};
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	};
</script>

<style lang="scss">
	.content {
		text-align: center;
		height: 400upx;
		margin-top: 10upx;

		.index_header {
			width: 100%;
			display: flex;
			font-size: 30upx;
			font-weight: bold;
			height: 40upx;
			text-indent: 15upx;
		}
		.swiper{
			width: 90%;
			margin: 0 auto;
			border: 1px solid white;
		}
		.pic{
			margin-top: 15upx;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-around;
			height: 100upx;
			.pic_1{
				width: 24%;
				height: 100upx;
				font-weight: bold;
				font-size: 25upx;
					image{
						width: 100upx;
						height: 100upx;
						border: 1px solid white;
						border-radius: 50%;
					}
			}
		}
		.gong{
			margin-top:80upx;
			display: flex;
			height: 240upx;
			justify-content: space-around;
			border-bottom: 15px solid #f2f2f2;
			.gong_1{
				width: 28.5%;
				background: wheat;
				border: 1px solid white;
				border-radius: 10upx;
				color: white;
				font-weight: bold;
			}
		}
		.manger{
			height: 45upx;
			margin-top: 20upx;
			display: flex;
			justify-content: space-between;
			height: 75upx;
			line-height: 55upx;
			border-bottom: 15px solid #f2f2f2;
			.manger_1{
				display: flex;
				font-size: 30upx;
				text-indent: 15upx;
				height: 75upx;
				line-height: 55upx;
				font-weight: bold;
			}
		}
		.clied{
			height: 45upx;
			line-height: 45upx;
			.clied_1{
				display: flex;
				justify-content: space-between;
				
				.pp{
					text-indent: 10upx;
					font-weight: bold;
				}
			}
		}
	}
</style>
